<template>
  <div id="app">
    <div class="wrap" :style="{'height':height}">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <Main-tab-bar v-if="hasTarBar"></Main-tab-bar>
  </div>
</template>

<script>
import MainTabBar from "./components/tabbar/MainTabBar";

export default {
  name: "App",
  components: {
    MainTabBar
  },
  data() {
    return {
      hasTarBar: true,
      height: '100%'
    };
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      if (to.meta.hasTarBar) {
        this.hasTarBar = true;
        this.height = 'calc(100% - 50px)';
      }else {
        this.hasTarBar = false;
        this.height = '100%';
      }
    }
  }
};
</script>
<style>
.wrap {
  max-width: 400px;
  height: calc(100% - 50px);
}
#tab-bar {
  max-width: 400px;
}
.title {
  width: 100%;
  /* 解决flex布局下会被挤压 */
  min-height: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@import "./assets/css/index.less";
</style>
